<template>
  <div class="nav-container">
    <div class="mid">
      <div class="msg">
        <div class="msg-title">学车流程</div>
        <ul>
          <li v-for="item in obj">
            <div class="icon">
              <Icon :type="item.icon" />
            </div>
            <div class="text">
              <div class="title">{{ item.title }}</div>
              <div class="des">{{ item.des }}</div>
            </div>
          </li>
        </ul>
      </div>
      <a href="#" class="header-logo"></a>
      <form class="search">
        <input type="text" id="inp" placeholder="请输入关键字" />
        <button>搜索</button>
      </form>
    </div>
  </div>
  <nav-component />
</template>

<script setup>
import navComponent from "../components/navComponent.vue";
import Icon from "../components/Icon.vue";

const obj = [
  {
    icon: "note",
    title: "科目一",
    des: "2024新题库",
  },
  {
    icon: "lt",
    title: "科目二",
    des: "精选视频，详解考点",
  },
  {
    icon: "fxp",
    title: "科目三",
    des: "全方位讲解，攻克难点",
  },
  {
    icon: "book",
    title: "科目四",
    des: "2024新题库",
  },
];
</script>

<style scoped>
.msg-title {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.489);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}

.title {
  cursor: pointer;
  color: dodgerblue;
}

.icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  font-size: 28px;
  margin-left: 30px;
  margin-right: 10px;
}

li {
  display: flex;
  align-items: center;
  height: 85px;
}

.msg {
  left: 0px;
  top: 230px;
  position: absolute;
  width: 300px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 99;
}

.nav-container {
  width: 100%;
  height: 150px;
  position: relative;
}

.header-logo {
  width: 180px;
  height: 70px;
  background-image: url("../assets/pic1.png");
  background-size: 100% 100%;
  position: absolute;

  top: 70px;
}

#inp,
button {
  border: 1px solid #ccc;
}

#inp {
  font-size: 14px;
  padding: 0 15px;
  width: 250px;
  height: 50px;
}

#inp:focus {
  border: 1px solid blue;
  outline: none;
}

button {
  height: 50px;
  width: 100px;
  position: absolute;
}

.search {
  position: absolute;
  right: 100px;
  bottom: 20px;
}

.mid {
  width: 1200px;
  position: relative;
  /* background-color: aqua; */
  height: 100%;
  margin: 0 auto;
}
</style>
